<template>
  <div class="login-page">
    <div class="wrapper">
      <div class="login-logo">
        <img src="../../assets/images/login-logo.png" />
      </div>
      <el-row>
        <el-col :span="16">
          <div class="login-img">
            <img width="90%" src="../../assets/images/login-img.png" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="login-form">
            <h1>登入</h1>
            <div class="login-input-row">
              <label>
                <i class="iconfont iconuser"></i> 登入名
              </label>
              <input placeholder="请输入登入名" v-model="loginUser.loginName" @click="hideError"/>
            </div>
            <div class="login-input-row">
              <label>
                <i class="iconfont iconpassword"></i> 密码
              </label>
              <input placeholder="请输入密码" type="password" v-model="loginUser.password" @click="hideError" />
            </div>
            <div class="login-error" v-show="error">
              <i class="icon-error"></i> {{this.errorMsg}}
            </div>
            <el-button type="primary" class="login-btn" @click="login">登入</el-button>
            <div class="clearfix forget-total">
              <div class="fl">
                <el-checkbox v-model="keepLogin">自动登录</el-checkbox>
              </div>
              <div class="fr">
                <el-link href="#/forget">忘记密码</el-link>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <p class="login-copyright">版权所有©2018-2020 BDDCo.，Ltd。保留所有权利。</p>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import router from "../../router/index.js";
export default {
  name: "Login",
  data() {
    return {
      errorMsg:null,
      error:false,
      loginUser:{
        loginName:null,
        password:null
      },
      keepLogin:true
    };
  },
  created() {
    let loginName = localStorage.getItem("loginName");
    let password = localStorage.getItem("password");
    this.loginUser.loginName = loginName ? loginName : '';
    this.loginUser.password = password ? password : '' ;
  },
  methods: {
    login: function() {
      this.storePassword();
      Http.api.post('user/login',this.loginUser).then((res)=>{
        localStorage.setItem("user",JSON.stringify(res.data));
    
        localStorage.setItem("token",res.data.token);
        this.initDataDic();
        console.log(res.data.token);
        router.push('/index');
      }).catch((res)=>{
        this.errorMsg=res.msg ;
        this.error = true ;

      })
    },
    initDataDic(){
      Http.api.get("dict/all").then((res)=>{
        this.Gloab.dataCode = res.data ;
      })
    },
    storePassword: function () {
      if(this.keepLogin){
        localStorage.setItem("loginName",this.loginUser.loginName);
        localStorage.setItem("password",this.loginUser.password);
      }else{
        localStorage.setItem("loginName",'');
        localStorage.setItem("password",'');
      }
    },
    hideError : function () {
      this.error = false ;
    }

  }
};
</script>

